import MemberHeader from "@/components/MemberHeader"
import useSelection from "antd/es/table/hooks/useSelection"
import { useEffect, useState } from "react"
import { useSelector } from "react-redux"

function Gift() {
    const token = localStorage.getItem('token')
    const [bool, setBool] = useState(true)
    const [giftList, setGiftList] = useState([{
        id: 0,
        amount: 0,
        limit: 0,
        selected: false,
        validDate: ['', '']
    }])
    const members = useSelector((state: { gift: { members: string[] } }) => state.gift.members)

    useEffect(() => {
        fetch('http://180.76.236.114:3006/me-api/coupons', {
            headers: {
                'Authorization': 'Bearer ' + token
            }
        })
            .then(res => res.json())
            .then(res => {
                setGiftList(res.data.map(item => {
                    const arr = item.validDate.map(it => it.replace(/-/g, '.'))
                    return { ...item, selected: false, validDate: arr }
                }))
            })
    }, [])

    return (
        <>
            <div className="flex h-full flex-col">
                <MemberHeader
                    title="优惠卷"
                    titleClass="ml-[265px] text-[34px]"
                    navigater='/care'
                />
                <div className="w-full h-[102px] bg-white border-b-1 border-[#EEEEEE]"></div>
                <div className="flex-1 w-full bg-[#F6F6F6] overflow-auto pb-[24px]">
                    {giftList.map((item, index) => <div
                        key={item?.id}
                        className="w-full h-[208px] mt-[24px] flex"
                    >
                        {item.selected ? <svg
                            className="icon mx-[22px] w-[36px] h-[36px] mt-[88px]"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="1632" width="200"
                            height="200"
                            style={{
                                borderRadius: '50%'
                            }}
                            onClick={() => {
                                setGiftList(prev => {
                                    const arr = prev
                                    arr[index].selected = false
                                    return arr
                                })
                                setBool(prev => !prev)
                            }}
                        >
                            <path
                                d="M0 512C0 229.234759 229.234759 0 512 0s512 229.234759 512 512-229.234759 512-512 512S0 794.765241 0 512z m419.310345 194.630621a35.310345 35.310345 0 0 0 49.399172 1.271172l335.518897-311.931586a35.310345 35.310345 0 0 0-48.075035-51.729655l-309.124413 289.544827-145.125518-149.645241a35.310345 35.310345 0 1 0-50.688 49.169655l168.112552 173.320828z"
                                fill="#389BFF"
                                p-id="1633" />
                        </svg> : <div className="
                        mx-[22px] 
                        border-[#777777] 
                        border-1 
                        rounded-full 
                        w-[36px] 
                        h-[36px]
                        mt-[88px]"
                            onClick={() => {
                                setGiftList(prev => {
                                    const arr = prev
                                    arr[index].selected = true
                                    return arr
                                })
                                setBool(prev => !prev)
                            }}
                        ></div>}
                        <div className="flex">
                            <div
                                className="h-full w-[250px] bg-[red] text-center pt-[10px] px-[10PX]"
                            >
                                <p style={{ color: '#FFFFFF', fontSize: '12px', marginBottom: '10px' }}>优惠券</p>
                                <p style={{ color: '#FFFFFF', fontSize: '25px' }}>￥{item.amount}</p>
                                <div className="
                                w-full
                                h-[1px]
                                bg-[#EEEEEE]
                                mb-[20px]"></div>
                                <p style={{ color: '#FFFFFF', fontSize: '12px' }}>满{item.limit}元可用</p>
                            </div>
                            <div className="h-full w-[400px] bg-[white] pl-[20px] pt-[30px]">
                                <p>有效期</p>
                                <p className="
                                mt-[30px]
                                text-[20px]">
                                    {item.validDate[0]}-{item.validDate[1]}
                                </p>
                            </div>
                        </div>
                    </div>)}
                </div>
                <div
                    className="bg-[#3689F5] w-full h-[98px] leading-[98px] text-center text-[30px]"
                    style={{ color: '#FFFFFF' }}
                    onClick={() => {
                        fetch('http://180.76.236.114:3006/me-api/coupon-grant', {
                            method: 'POST',
                            body: JSON.stringify({
                                members: members,
                                coupons: giftList.filter(item => {
                                    return item.selected
                                }).map(item => item.id)
                            }),
                            headers: {
                                'Authorization': 'Bearer ' + token
                            }
                        }).then(res => res.json())
                            .then(res => {
                                if (res.status === 1) {
                                    alert('发放成功')
                                } else {
                                    alert('发放失败')
                                }
                            })
                    }}
                >
                    送券(共{giftList.filter(item => item.selected).length}张)
                </div>
            </div >
        </>
    )
}
export default Gift